<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link type="text/css" rel="styleSheet" href="index2.0.css">
    <link type="text/css" rel="styleSheet" href="circle2.0.css">
    <script src="text.js"></script>
</head>

<body style="width: 800px; height: 800px;">
    <div class="MainBox">
        <!-- 设置背景，通过设置flex布局的z-index: -1; 还要position -->

        <div class="content">

            <!-- 图片&文字 登录界面 按钮 -->
            <div class="left_box">
                <!-- 左边放圆区块 -->
                <!-- <div class="left_circle">
                   
                </div> -->
                <!-- 左边区块 -->
                <div class="left_content">
                    <!-- 盒子一 图片&We are TiDi -->
                    <div class="l_contentBox1">
                        <img src="logo.png" alt="" width="40px" height="40px">
                        <p style="font-family: SMicrosoft JhengHei; opacity: 0.8; font-size: 20px; margin-top: 10px;">We
                            are
                            TiDi</p>
                    </div>
                    <!-- 盒子二 账号&密码&登录& -->
                    <div class="l_contentBox2">

                        <span class="contentBox2_span0">
                            <p style="font-size: 12px; opacity: 1; margin-left: 15px; margin-bottom: 12px;">Please Login
                                to your account
                            </p>
                        </span>

                        <!-- opacity 设置透明度 -->
                        <!-- Username -->
                        <span class="contentBox2_span1">
                            <p class="input_words">Username</p>
                            <input type="text" value="Phone or email id" style="font-size: 12px; padding-left: 12px; ">
                        </span>

                        <!-- Password -->
                        <span class="contentBox2_span2">
                            <p class="input_words">Password</p>
                            <input type="text" value="Password" style="font-size: 12px; padding-left: 12px;">
                        </span>

                        <!-- 按钮 -->
                        <span class="contentBox2_span3">

                            <!-- <span><input type="image" name="register" value="Login to TiDi" id="submit" src="登录条.png" style="font-size: 5px;"></span> -->
                            <button class="Login">
                                <p style="font-size: 12px; color: rgb(233, 227, 227);">Login to TiDi</p>
                            </button>
                            <span class="span3_words">Forget Password?</span>
                        </span>
                    </div>
                    <!-- 盒子三 Creat New -->
                    <div class="l_contentBox3">
                        <p style="font-size: 8px;transform: scale(0.75);position: relative;">Don't have an account?</p>
                        <!-- <button class="Creat" onclick="a()">
                            <span class="Login" s></span>
                            <p style="font-size: 8px; opacity: 0.7;transform: scale(0.75);">Creat New</p>
                        </button> -->
                        <span class="Creat">
                            <img src="登录条.png" class="bg_Creat"></span>
                        <button class="btn_Creat">
                            <p
                                style="transform: scale(0.8); background: linear-gradient(90deg,rgb(180, 209, 98),rgb(226, 79, 170)); color: transparent; -webkit-background-clip: text;">
                                Creat New
                            </p>
                        </button>
                        </span>
                    </div>
                </div>
                <!-- 右边放圆区块 -->
                <!-- <div class="right_circle">
                    
                </div> -->
            </div>
            <!-- 俩个盒子 一个是俩文本 一个文本加图形 -->
            <div class="right_box">


                <!-- 内容区域 -->
                <div class="right_content">

                    <!-- 盒子一 标题&介绍 -->
                    <span class="right_box1">
                        <!-- 标题 -->
                        <span class="Title">
                            <p>
                                <b>T i d i</b>
                            </p>
                        </span>
                        <!-- 介绍 -->
                        <span class="Dirc">

                            We are more than
                            <br>
                            just a company


                        </span>
                    </span>

                    <!-- 盒子二 文本&图像 -->
                    <span class="right_box2">
                        <!-- 文本 -->
                        <span>
                            <p class="right_Txt">
                                Simply dummy text of the printing and lypastting industry lorem lpsum has been the
                                industy's m-est starderd dummy text ever since tht 1500s when an un know printer.
                            </p>
                        </span>
                        <!-- 图像 -->
                        <span class="right_Image">
                            <button style="width: 18px; margin-left: 6px;"></button>
                            <button style="width: 6px;  "></button>
                            <button style="width: 8px; "></button>
                        </span>
                    </span>

                </div>
                <!-- 左边背景 -->
                <img src="登录界面.png" alt="" width="100%" height="100%" class="right_bg">
            </div>
        </div>

        <!-- 纯纯小丑行为 -->
        <!-- <div class="content_shadow"></div> -->
        <figure class="circle1"></figure>
        <figure class="circle2"></figure>
        <figure class="circle3"></figure>
        <figure class="circle4"></figure>
        <figure class="circle5"></figure>
        <figure class="circle6"></figure>
        <figure class="circle7"></figure>
        <figure class="circle8"></figure>
        <figure class="circle9"></figure>
        <figure class="circle10"></figure>
        <figure class="circle12"></figure>
        <figure class="circle11"></figure>
        <figure class="circle13"></figure>
        <div class="bg"><img src="背景.png" width="1200" height="800"></div>
    </div>
</body>

</html>